import React, { createRef, memo, useState } from 'react'
import { CenterWrapper } from './style'
import IconSearchBar from '@/assets/svg/icon-search-bar'
import SearchTabs from './c-cpns/search-tabs'
import SearchTitles from '@/assets/data/search_titles.json'
import SearchSections from './c-cpns/search-sections'
import { CSSTransition } from 'react-transition-group'

const HeaderCenter = memo((props) => {
  const { isSearch, searchBarClick } = props
  // 当前选中的 tab
  const [tabIndex, setTabIndex] = useState(0)
  const titles = SearchTitles.map((item) => item.title)

  const barRef = createRef()
  const detailRef = createRef()

  function handleSearchBarClick() {
    if (searchBarClick) {
      searchBarClick()
    }
  }

  return (
    <CenterWrapper>
      {/* unmountOnExit: 退出时卸载此组件 */}
      <CSSTransition in={!isSearch} nodeRef={barRef} classNames="bar" timeout={250} unmountOnExit={true}>
        {/* 普通模式 */}
        <div className="search-bar" onClick={handleSearchBarClick} ref={barRef}>
          <div className="text">搜索房源和体验</div>
          <div className="icon">
            <IconSearchBar />
          </div>
        </div>
      </CSSTransition>
      <CSSTransition in={isSearch} nodeRef={detailRef} classNames="detail" timeout={250} unmountOnExit={true}>
        {/* 搜索的详情 */}
        <div className="search-detail" ref={detailRef}>
          <SearchTabs titles={titles} tabClick={setTabIndex} />
          <div className="infos">
            <SearchSections searchInfos={SearchTitles[tabIndex].searchInfos} />
          </div>
        </div>
      </CSSTransition>
    </CenterWrapper>
  )
})

export default HeaderCenter
